.dropdown {
  position: relative;

  &.dropdown--active .dropdown__trigger button,
  .dropdown__trigger button:hover {
    background: color("gray-lighten-4");
  }

  &.dropdown--active .dropdown__trigger button::after {
    content: "\e5ce";
  }

  .dropdown__trigger {
    button {
      position: relative;
      padding: 10px 30px 10px 10px;
      margin: 0;
      background: transparent;
      border: 2px solid transparent;
      border-radius: 3px;
      outline: 0;
      cursor: pointer;
      transition: background 0.25s;

      span {
        padding: 0 5px;
      }

      &.icon {
        padding-left: 30px;
        &::before {
          left: 5px;
        }
      }

      &::after,
      &::before {
        position: absolute;
        font-family: "materialicon";
        font-size: 24px;
        color: rgba(color("gray-darken-1"), 0.8);
        top: 50%;
        transform: translateY(-50%);
      }

      &::after {
        content: "\e5cf";
        right: 10px;
        font-size: 20px;
      }
    }
  }
}

.dropdown-bound-content {
  position: absolute;
  background: color("white");
  border: 1px solid color("gray-lighten-2");
  border-radius: 3px;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.2);
  transform-origin: top left;
  z-index: 100;

  &.anim-scale-fade-enter {
    opacity: 0;
    transform: scale(0.8, 0.8);

    &.anim-scale-fade-enter-active {
      opacity: 1;
      transform: scale(1, 1);
      transition: all 0.15s ease-in-out;
    }
  }

  &.anim-scale-fade-exit {
    opacity: 1;
    transform: scale(1, 1);

    &.anim-scale-fade-exit-active {
      opacity: 0;
      transform: scale(0.8, 0.8);
      transition: all 0.15s ease-out;
    }
  }
}
